<?php echo $this->render('/public/header'); ?>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<script src="https://cdn.bootcss.com/element-ui/1.4.3/index.js"></script>
<link href="https://cdn.bootcss.com/element-ui/1.4.3/theme-default/index.css" rel="stylesheet">
<script src="/statics/public/postbird-img-glass.js"></script>
<div id="main" class="col-lg-12 col-md-12 col-sm-12 col-xs-12" v-cloak>
    <el-row style="margin-top:10px">
        <el-col :span="4" style="margin:30px 40px;min-height: 350px" v-for="(v,k) in list">
            <el-card :body-style="{ padding: '0px' }">
                <img :src="'<?php echo CDN; ?>'+v.img_src" class="image" style="width:100%;height: 200px">
                <div style="padding: 14px;">
                    <div class="bottom clearfix">
                        <p><strong>{{v.product_name}}</strong></p>
                        <br/>
                        <p>{{v['saleman']?v['saleman']:''}}</p>
                        <p>${{v['price']}}{{v['pcs']}}{{v['unit']}}</p>
                        <br/>
                        <p>{{v['description'].length > 30 ? v['description'].slice(0,30) : v['description']}}</p>
                        <br/>
                        <el-row>
                            <el-col :span="23">
                                <el-input v-if="v.remarkedit"
                                          type="textarea"
                                          autoSize
                                          placeholder="remark"
                                          v-model="list[k].remark">
                                </el-input>
                                <p v-else>{{v.remark?v.remark:'edit your remark'}}</p>
                            </el-col>
                            <el-col :span="1">
                                <i v-if="v.remarkedit" class="el-icon-check" style="line-height: 33px"
                                   @click="upload(v.id,'remark')"></i>
                                <i v-else class="el-icon-edit" style="line-height: 33px" @click="editable(v.id)"></i>

                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="23">
                                <el-input v-if="v.urledit"
                                          type="textarea"
                                          autoSize
                                          placeholder="url"
                                          v-model="v.url">
                                </el-input>
                                <a v-else :href="v.url" target="_blank">{{v.url?v.url:'edit link url'}}</a>
                            </el-col>
                            <el-col :span="1">
                                <i v-if="v.urledit" class="el-icon-check" style="line-height: 33px"
                                   @click="upload(v.id,'url')"></i>
                                <i v-else class="el-icon-edit" style="line-height: 33px" @click="urleditable(v.id)"></i>
                            </el-col>
                        </el-row>
                        <el-button type="text" class="button" @click="removeFavor(v.id)">remove favor</el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-alert v-if="list.length<=0"
              title="You have no favor now"
              type="error"
              show-icon>
    </el-alert>
</div>
<script>
    new Vue({
        el: "#main",
        data: {
            list:<?php echo json_encode($list);?>
        },

        methods: {
            editable: function (id) {
                let arr = [];
                this.list.forEach((v) => {
                    if (v.id == id) {
                        v.remarkedit = true;
                    }
                    arr.push(v);
                });
                this.list = arr;
            },

            urleditable: function (id) {
                let arr = [];
                this.list.forEach((v) => {
                    if (v.id == id) {
                        v.urledit = true;
                    }
                    arr.push(v);
                });
                this.list = arr;
            },
            removeFavor: function (id) {
                $.post('/purchase/del-favor', {id: id}, () => {
                    let arr = [];
                    this.list.forEach(v => {
                        if (v.id != id) {
                            arr.push(v);
                        }
                    });
                    this.list = arr;
                })
            },
            upload: function (id, param) {
                let value;
                this.list.forEach(v => {
                    if (v.id == id) {
                        value = v[param];
                    }
                });
                $.post('/purchase/update-favor', {id: id, param: param, value: value}, (res) => {
                    if (res.code == 1) {
                        this.$message.success(res.msg);
                        let arr = [];
                        this.list.forEach(v=>{
                            if (v.id==id){
                                v[param] = value;
                                v[param+'edit'] = false;
                            }
                            arr.push(v);
                        });
                        this.list = arr;
                    } else {
                        this.$message.error(res.msg);
                    }

                }, 'json')


            }
        }
    });
    PostbirdImgGlass.init({
        domSelector: "img",
        animation: true,
        width: "500px",
        height: "500px",
    });
</script>
<?php echo $this->render('/public/footer'); ?>
